<template>
	<view class="loan p-30">
		<view class="title">
			基本信息
		</view>
		<view class="bg-fff br-10  m-b-20">
			<u-row customStyle="padding: 20rpx;color: #666;font-size: 25rpx;border-bottom: 1px solid #f7f8fa"
				v-for="item in infoList" :key="item.key">
				<u-col span="3">
					{{item.name}}
				</u-col>
				<u-col span="9">
					<text style="color: #333;">
						{{info[item.key] || '--'}}
					</text>
				</u-col>
			</u-row>
		</view>
		<view class="bg-fff br-10  m-b-20" v-if="type==='外借他人'||info.externalName">
			<u-row customStyle="padding: 20rpx;color: #666;font-size: 25rpx;border-bottom: 1px solid #f7f8fa"
				v-for="(item, index) in loanList" :key="item.key">
				<u-col span="3">
					<view style="display: flex;">
						<view style="color: red">*</view>
						<view>{{item.name}}</view>
					</view>
				</u-col>
				<u-col span="9">
					<view style="color: #333;">
						<u--input border="none" :placeholder="`请输入${item.name}`" v-model="info[item.key]"
							:disabled="type==='back'"></u--input>
					</view>
					<text v-show="!info[item.key]&&!check" style="color: red;text-align: end;">{{item.name}}不能为空</text>
					<text v-show="index==1&&!checkLength" style="color: red;text-align: end;">号码长度为11位</text>
				</u-col>
			</u-row>
		</view>
		<view class="title">
			仪器申请
		</view>
		<view class="bg-fff br-10 p-20">
			<image v-if="type!='back'" @click="addEquip" src="@/static/add-equipment.png" style="width: 100%;height: 150rpx;">
			</image>
			<view class="table-label p-y-20">{{type=='back'?'归还':'借用'}}仪器一览</view>
			<u-row customStyle="padding: 20rpx;color: #999999;background: #f1f1f1;font-size: 22rpx;">
				<u-col :span="type!='back'?7:8">
					器具名称
				</u-col>
				<u-col span="4">
					准确度
				</u-col>
				<u-col span="1" v-if="type!='back'">
					操作
				</u-col>
			</u-row>
			<u-empty v-if="!equipList.length" marginTop="30rpx" mode="list" icon="/static/null.png">
			</u-empty>
			<u-row v-else customStyle="padding: 20rpx;color: #333;border-bottom: 1px solid #E7E8EC;font-size: 22rpx;"
				v-for="(item, index) in equipList" :key="item.id">
				<u-col :span="type!='back'?7:8">
					<view>{{item.name}}({{item.modelNumber}})</view>
				</u-col>
				<u-col span="4">
					<view>
						{{item.devicePrecision}}
					</view>
				</u-col>
				<u-col span="1" v-if="type!='back'">
					<text class="del-btn" @click="delEquip(index)">删除</text>
				</u-col>
			</u-row>
		</view>
		<template v-if="backComment">
			<view class="title">
				驳回理由
			</view>
			<view class="table-label bg-fff p-20 br-10 w-p-l">
				{{backComment}}
			</view>
		</template>
		<u-gap height="50" bgColor="#f7f8fa"></u-gap>
		<view class="window-bottom">
			<u-button type="primary" text="提交申请" @click="onSubmit"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				taskId: '',
				backComment: '',
				check: true,
				checkLength: true,
				type: '正常使用',
				info: {
					realName: '',
					mobile: '',
					date: '',
					externalName: '',
					externalPhone: ''
				},
				equipList: [],
				infoList: [{
						name: '借用人',
						key: 'realName'
					},
					{
						name: '联系方式',
						key: 'mobile'
					},
					{
						name: '借用日期',
						key: 'date'
					},
				],
				loanList: [{
						name: '借出人',
						key: 'externalName'
					},
					{
						name: '联系方式',
						key: 'externalPhone'
					},
				],
			}
		},
		onLoad(option) {
			this.getType()
			this.id = option.id
			this.taskId = option.taskId
			this.backComment = option.backComment
			if (option.id) {
				this.getDetail()
				return
			}
			this.getUserInfo()
			this.getSelectAll()
		},
		onPullDownRefresh() {
			this.info = {
				...this.info,
				date: new Date().Format('yyyy-MM-dd hh:mm:ss')
			}
			uni.stopPullDownRefresh()
		},
		onUnload() {
			uni.setStorageSync('loanType', '')
		},
		methods: {
			getType() {
				this.type = uni.getStorageSync('loanType');
				let title = '借用工具'
				if (this.type === '外借他人') {
					title = '外借工具'
				} else if (this.type == 'back') {
					title = '归还工具'
					this.infoList[0].name = '归还人'
					this.infoList[2].name = '归还日期'
				}
				uni.setNavigationBarTitle({
					title: title
				});
			},
			getDetail() {
				this.$api.getWarehouseDetail({
					id: this.id
				}).then(res => {
					this.info = res.data
					if (this.info.applicantUser) {
						this.info.realName = this.info.applicantUser.realName
						this.info.mobile = this.info.applicantUser.mobile
					}
					this.equipList = res.data.instrumentsDTOs || []
					this.info.date = new Date().Format('yyyy-MM-dd hh:mm:ss')
				})
			},
			// 获取选择的仪器
			getSelectAll() {
				try {
					const list = uni.getStorageSync('selectAll');
					if (list) {
						this.equipList.push(...JSON.parse(list))
						uni.setStorageSync('selectAll', JSON.stringify([]))
					}
				} catch (e) {
					this.equipList = []
				}
			},
			getUserInfo() {
				try {
					const info = uni.getStorageSync('userInfo');
					const loanInfo = uni.getStorageSync('loanInfo');
					if (info) {
						this.info = JSON.parse(info)
						this.info.date = new Date().Format('yyyy-MM-dd hh:mm:ss')
					}
					if (loanInfo) {
						let data = JSON.parse(loanInfo)
						this.info.externalName = data.externalName
						this.info.externalPhone = data.externalPhone
					}
				} catch (e) {
					// error
				}
			},
			// 添加仪器
			addEquip() {
				// if (this.equipList.length) {
				// 	uni.setStorageSync('selectAll', JSON.stringify(this.equipList))
				// }
				uni.setStorageSync('loanInfo', JSON.stringify({
					externalName: this.info.externalName,
					externalPhone: this.info.externalPhone
				}))
				uni.navigateTo({
					url: `/pages/selectEquipment/selectEquipment`
				});
			},
			// 删除仪器
			delEquip(index) {
				this.equipList.splice(index, 1)
			},
			// 归还
			onBack() {
				this.$api.onBackSubmit({
					taskId: this.taskId
				}).then(res => {
					if (res.msg == 'success') {
						uni.showToast({
							title: '提交成功',
						})
						uni.navigateTo({
							url: '/pages/back/back'
						})
					}
				})
			},
			// 新增、重新提交的时候调编辑
			async onSubmit() {
				if (this.type === 'back') {
					this.onBack()
					return
				}
				// 外借校验外借人姓名和电话
				if (this.type === '外借他人' && (!this.info.externalName || !this.info.externalPhone)) {
					this.check = false
					return
				}
				if (this.info.externalPhone && this.info.externalPhone.length != 11) {
					this.checkLength = false
					return
				}
				if (!this.equipList.length) {
					uni.showToast({
						title: '仪器列表不能为空',
						icon: 'none'
					})
					return
				}
				let param = {
					// 使用范围 1 内部 2 外借
					useScope: this.type === '外借他人' ? 2 : 1,
					applicantId: this.info.id,
					applicantOutDate: this.info.date,
					externalName: this.info.externalName,
					externalPhone: this.info.externalPhone,
					instrumentsDTOs: this.equipList,
				}
				let apiName = 'onSubmitWareHouse'
				if (this.id) {
					param = this.info
					apiName = 'onEditWareHouse'
				}
				const res = await this.$api[apiName](param)
				if (res.msg === 'success') {
					let id = this.id
					if (res.data) {
						id = res.data.id
					}
					this.openFlow(id)
					uni.setStorageSync('loanInfo', '')
				}
			},
			// 开启工作流、重新提交
			openFlow(id) {
				let params = {
					processDefinitionKey: this.type === '外借他人' ? "lend" : "outin",
					businessKey: id,
					variables: {
						userId: this.info.id
					}
				}
				let apiName = 'openFlow'
				if (this.backComment) {
					apiName = 'onBackSubmit'
					params = {
						taskId: this.taskId
					}
				}
				this.$api[apiName](params).then(res => {
					uni.showToast({
						title: '提交成功',
						icon: 'none'
					})
					uni.switchTab({
						url: `/pages/warehouse/warehouse`
					});
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.loan {
		.title {
			font-size: 28rpx;
			font-weight: 600;
			color: #333333;
			padding-left: 12rpx;
			border-left: 2px solid #0E64FE;
			margin: 14rpx 0;
		}

		.table-label {
			font-size: 25rpx;
			color: #666666;
		}

		.del-btn {
			font-size: 22rpx;
			text-decoration: underline;
			color: #D91A1A;
			cursor: pointer;
		}
	}
</style>